@import "lib-mixins";
@import "lib-rem";
@import "lib-reset";

@import "com-header";
@import "com-left-menu";

.empty-tips{
  text-align: center;
  font-size: 18px;
  color: #888;
  margin: 40px 0 0;
}
.table{
  width: 98%;
  background: #fff;
  margin:0 auto;
  th{
    padding:20px !important;
    text-align: left !important;
  }
  td{
    padding: 14px 20px !important;
    vertical-align: middle !important;
    border-color:#f0f0f0 !important;
    a>i{
      color: #409EEF;
      margin: 0 5px;
      font-size: 25px;
      &:hover{
        color:#8CCDEA;
      }
    }
    .delete-icon{
      background-image: url('../slice/icon_delete_normal.png');
      background-repeat: no-repeat;
      vertical-align: middle;
      margin-top:1px;
      &:hover{
        background-image: url('../slice/icon_delete_hover.png');
      }
    }
  }
  thead{
    background: #6398D7;
    color:#fff;
    th{
      font-weight: normal;
      border:none !important;
      font-size: 15px;
    }
  }
  tbody{
    & > tr:hover {
      background-color: #F3F9FD;
    }
    td .material-icons{
      color: #5FAEF2;
      margin: 0 20px 0 0;
    }
  }
}
.check-more{
  display: block;
  text-align: center;
  color: #409EEF;
  margin: 10px auto;
  padding: 10px;
  width: 140px;
  &:hover{
    color: #0089FF;
  }
  &.disabled{
    color: #A4A7A9;
    cursor: default;
  }
}
.loading{
  color: #666;
  font-size: 24px;
  animation: loading 0.9s linear infinite;
}
@keyframes loading {
  from{transform: rotate(0deg)}
  to{transform: rotate(360deg)}
}
.operate-cover{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0);
  position: fixed;
  z-index: 12;
  top:0;
  left:0;
  display: none;
}
.operate-box{
  width: 60px;
  height: 60px;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 13;
  .main-btn{
    color:#fff;
    background-color:#DB4437 ;
    width: 60px;
    height: 60px;
    text-align: center;
    display: block;
    line-height: 60px;
    border-radius: 50%;
    box-shadow: 2px 0 10px #939393,0 2px 10px #939393;
    z-index: 14;
    position: relative;
  }
  .alert-btn{
    width: 40px;
    height: 40px;
    background-color: #000;
    color:#fff;
    border-radius: 50%;
    position: absolute;
    top:0;
    left:0;
    text-align: center;
    line-height: 40px;
    z-index: 13;
    opacity: 0;
    transition: all .2s ease;
  }
}
.operate-box.active{
  .alert-btn{
    opacity: 1;
  }
  .a1{
    transform: translate(-10px, -60px) rotate(360deg);
  }
  .a2{
    transform: translate(-60px, -10px) rotate(360deg);
  }
}
@media (max-width: 1376px) {
  .body-box{
    padding-top: 80px;
  }
  .table th{
    padding: 15px 20px !important;
  }
  .table td{
    padding: 10px 20px !important;
  }
}